<template>
  <div>
    <p class="m-title">邀请注册</p>
    <div class="m-invitation">
      <div class="tip-txt">
        <p>奖励提示：</p>
        <ul>
          <li>· 请不要发送邀请码给不熟悉的人，避免给别人带来不必要的困扰。</li>
          <li>· 请把下面的推广链接发给您的好友，邀请他注册。</li>
          <li>· 被推荐人注册完成之后您就可获得 0元红包的奖励。</li>
          <li>· 奖励资金只能用于投资，不能直接提现。</li>
        </ul>
      </div>
      <!-- 邀请链接 -->
      <div class="m-link">
        <div class="m-input">
          <w-input></w-input>
        </div>
        <div class="m-copy">
          <w-button type="main">复制</w-button>
        </div>
      </div>
      <!-- 邀请列表 -->
      <div class="m-list">
        <w-table :columns="columns">
          <tr>
            <td>刘诗诗</td>
            <td>2018-09-12 15:40:02</td>
            <td>173****8989</td>
            <td>是</td>
            <td>是</td>
            <td>10.00</td>
          </tr>
        </w-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {title: '受邀人昵称', width: 'auto'},
        {title: '注册时间', width: 'auto'},
        {title: '手机号码', width: 'auto'},
        {title: '是否实名认证', width: 'auto'},
        {title: '是否投资', width: 'auto'},
        {title: '获得奖励金额', width: 'auto'}
      ]
    }
  }
}
</script>

<style lang="scss">
.m-link {
  .m-input {
    .form-control {
      width: 520px;
      height: 30px;
    }
  }
  .m-copy {
    .btn {
      width: 60px;
      height: 30px;
    }
  }
}
.m-list {
  table {
    th {
      height: 34px !important;
      background-color: #FAFAFA;
      border-bottom: none !important
    }
  }
}
</style>


<style lang="scss" scoped>
.m-title {
  font-size: 16px;
  margin-bottom: 20px; 
  font-weight: bold;
}
.m-invitation {
  ul {
    margin-top: 30px;
    li {
      line-height: 22px;
    }
  }
  .m-link {
    margin: 20px auto 50px;
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 20px;
    & > div {
      display: inline-block;
      margin-right: 30px;
    }
  }
}
</style>
